<script lang="ts" setup>
import { ref } from "vue";
import shoppingCart from "../../components/shopping-cart/index.vue";

const isVip = ref(false);
</script>

<template id="6d3b752b-c262-4a4c-a67e-41d403658d89">
  <umi-image id="8809d7ce-df86-44c2-90f1-aba9466f4914" width="100%" :height="250"></umi-image>
  <umi-container id="bbc5134d-d00e-4fd2-b041-7ba8296b6e97" padding="16px" :gap="16" min-height="100vh" bg-color="#f2f2f2">
    <umi-container id="43b7dd3c-3381-487f-a064-c1f6b46676f9" justify="between" padding="16px" height="200px" bg-color="#fff">
      <umi-container id="a548fcfd-7603-4d1e-8711-99471722ca87" direction="horizontal" justify="between" align="center">
        <umi-text id="3ac218b3-cbbd-4bca-8486-72e996c4efa9" :size="18" bold>大蓝卡</umi-text>
        <umi-text id="a37abc8c-c822-4e8a-970c-8bc9e63e5e81" :size="14" bold color="#ff0000">分享给TA</umi-text>
      </umi-container>
      <umi-container id="ae016b54-91ba-429e-b724-de027aecb466" direction="horizontal" justify="between">
        <umi-text id="7662a07e-b158-4446-8df4-5dcc006f9f34">到期：2025/10/10</umi-text>
        <umi-text id="eb0622b1-4147-4268-ab2b-1c42079826ae">NO.123456</umi-text>
      </umi-container>
    </umi-container>
    <umi-divider id="5967c03e-8927-4438-80aa-0b48391944a2" padding="0">
      <umi-text id="0b3441bc-6411-4ea5-b001-0745baa2dd36" :size="16" bold>会员权益</umi-text>
    </umi-divider>
    <umi-row id="1aba6473-f148-4200-a691-f9ecf85c6d96" :gutter="16">
      <umi-col id="dc9e2d2a-d383-48bf-96a6-327520fc4cf5" :span="12">
        <umi-container id="2216031f-e5c6-4538-a318-1558125722f2" justify="center" :gap="16" align="center" height="100px" bg-color="#fff" radius="10px">
          <umi-text id="86948d27-fdbb-4f8a-8ec3-6e9aa400a9ad" bold>美食饮品</umi-text>
          <umi-text id="01fd14a7-35ed-4bec-8604-aad9b1c55e52">低至5折</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="b06ece49-6b6e-4bce-9d36-3ed6085274eb" :span="12">
        <umi-container id="0c656c79-0ce4-4f29-a349-001173bda777" justify="center" :gap="16" align="center" height="100px" bg-color="#fff" radius="10px">
          <umi-text id="15808718-1f2f-495a-a893-9645b5bdf369" bold>兴趣课程</umi-text>
          <umi-text id="159fae08-25ef-4f2d-92eb-92da0b2ffe7b">低至5折</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="cc4298f6-a9d9-42bb-84bf-b6ddd85bc38b" :span="12">
        <umi-container id="634558d6-d05b-4c02-a2ad-c78d42329949" justify="center" :gap="16" align="center" height="100px" bg-color="#fff" radius="10px">
          <umi-text id="561dfaa8-96d1-43be-94f8-793cb88353fb" bold>汽车美容</umi-text>
          <umi-text id="6eadc294-27f9-4715-a2cd-a457535531a9">低至5折</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="f22cc355-9614-4d7b-9c34-e283bbf12856" :span="12">
        <umi-container id="e63da26c-9f6b-4878-9f41-fa98e6f4b798" justify="center" :gap="16" align="center" height="100px" bg-color="#fff" radius="10px">
          <umi-text id="4ebd5800-eb60-4669-88f9-9ab4f29ed687" bold>美容美发</umi-text>
          <umi-text id="44bbd611-bcfa-4212-9c14-762f9843d696">低至5折</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="c371bf22-6ae4-4fbc-9284-9b5f06907143" :span="12">
        <umi-container id="76d720dd-8fe0-45bc-81bf-5e7b3f669413" justify="center" align="center" height="100px" bg-color="#fff">
          <umi-text id="0b52efc9-6f4f-4174-a462-604931f06aea">即将上线</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="bbfe65f3-b8ab-4db5-8bff-7de6b525806d" :span="12">
        <umi-container id="e84b83c4-1a2c-44da-99c0-fae670300d99" justify="center" align="center" height="100px" bg-color="#fff">
          <umi-text id="55e6b885-0f69-4fa7-82c6-1bcaac24dc93">即将上线</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="f7c05829-ba25-4f66-bc49-8ddee0f42cfa" :span="12">
        <umi-container id="55329a05-f762-4a6f-83fe-0d5f3826a667" justify="center" align="center" height="100px" bg-color="#fff">
          <umi-text id="697c6f32-2933-4dbd-825e-ead08cacbda3">即将上线</umi-text>
        </umi-container>
      </umi-col>
      <umi-col id="39bc601e-6ffb-4d67-99c8-b74cedb064ea" :span="12">
        <umi-container id="3bb18763-2e76-4518-82f7-47fab3fdc775" justify="center" align="center" height="100px" bg-color="#fff">
          <umi-text id="f9cfe1da-070c-424c-9a2d-2b6ee4d97029">即将上线</umi-text>
        </umi-container>
      </umi-col>
    </umi-row>
  </umi-container>
  <umi-action-bar id="d17990e9-86c8-43f7-8b6b-bbfaced6e355" fixed>
    <umi-container id="72298537-3ee6-431e-bd7b-a75dae5113e8" padding="0 16px 16px" v-if="!isVip">
      <umi-radio id="99c15fb3-4d44-4642-9664-ec7b7c4d637c">
        <umi-text id="d1b2ada5-cb99-4bb9-ab2f-344d8068662c">开通会员代表接受《付费会员服务协议》</umi-text>
      </umi-radio>
      <umi-container id="076cc5ba-25d5-46e4-8687-1fbdae72fc9a" direction="horizontal" justify="center" padding="16px" :gap="20" bg-color="#ccc" radius="100px">
        <umi-space id="ed46637b-c921-42f1-a677-19b112e0bded" :size="10" align="center">
          <umi-text id="39a50394-16c4-442e-bb1d-eb09db8242f2" :size="18" bold>限时9.9元/月</umi-text>
          <umi-text id="7f49b08b-fb93-46a6-b22a-c02db3259971" :size="12" color="#666" through :line-height="12">原价68元/月</umi-text>
        </umi-space>
        <umi-button id="a63538eb-c7e6-4468-a986-b5fbe8f8a7fa" type="primary" shape="round" @click="isVip = true">立即成为</umi-button>
      </umi-container>
    </umi-container>
    <umi-container id="dcfb047d-68d5-42ed-a9b9-4739946f206a" padding="16px" :gap="10" align="center" v-else="isVip">
      <umi-text id="b7f1ddf3-1b51-4345-9bc7-055d9482610f">您今日的五折商品已送达，请看好再下手噢。</umi-text>
      <umi-button id="7b239aea-b6c0-4a0e-a7c6-892b7e44be61" size="middle" type="primary" shape="round" full @click="$router.push({ name: 'RankingList' })">我来看看</umi-button>
    </umi-container>
  </umi-action-bar>
  <shopping-cart id="3beac4c5-cc1a-40b7-81cc-4720fb4a5561"></shopping-cart>
</template>
